<script lang="ts" setup>
import { otherApi } from '@/request/api'
import upload from '@/request/upload'
import { useProfile } from '@/stores'
import { useChooseImage, useHideLoading, useLoading, useNavBack, useToast } from '@/utils'
import { to } from 'await-to-js'
import { isEmpty } from 'lodash-es'
import { ref } from 'vue'
import { object as zobject, string as zstring } from 'zod'

const profile = useProfile()

const content = ref('')
const pictureUrl = ref('')
const mobile = ref('')
const orderNo = ref('')

async function handleAddPicture() {
  const [chooseErr, chooseRes] = await to(useChooseImage())
  if (chooseErr) {
    return
  }

  useLoading(true)
  const [uploadErr, uploadRes] = await to(upload({ filePath: chooseRes[0] }))
  if (uploadErr) {
    return useHideLoading()
  }
  useHideLoading()
  pictureUrl.value = uploadRes.fileUrl
}

async function handleSubmit() {
  const zparse = zobject({
    common: zstring().min(1, { message: '请填写问题描述' }).trim(),
    imgs: zstring(),
    mobile: zstring().regex(/^1\d{10}$/, { message: '请填写完整手机号' }),
    orderCode: zstring().regex(/^[a-z0-9]+$/i, { message: '请填写完整订单号' }),
  }).safeParse({
    common: content.value,
    imgs: pictureUrl.value,
    mobile: mobile.value,
    orderCode: orderNo.value,
  })
  if (!zparse.success) {
    return useToast(zparse.error.issues[0].message)
  }

  useLoading(true)
  const [err] = await to(otherApi.complaint({
    ...zparse.data,
    uid: profile.userInfo.id,
  }))
  useHideLoading()
  if (err) {
    return
  }

  useToast('提交成功', { icon: 'success' })
  useNavBack()
}
</script>

<template>
  <view class="px-30px pt-20px">
    <!--  -->
    <view class="rd-16px bg-white px-20px pb-20px">
      <view class="pl-10px text-28px text-#3 lh-70px">问题描述</view>
      <view class="h-300px rd-16px bg-#F4F5F9 p-15px">
        <textarea v-model="content" class="h-full text-28px" placeholder="请在这留下您的备注"></textarea>
      </view>
      <view class="grid grid-cols-3 mt-20px gap-10px md:grid-cols-5">
        <ui-aspect-ratio>
          <view class="relative h-full w-full" @click="handleAddPicture">
            <view v-if="isEmpty(pictureUrl)" class="absolute top-0 h-full w-full flex flex-col items-center justify-center rd-16px bg-gray-200 text-gray-400">
              <view class="i-fluent:camera-add-24-regular text-60px"></view>
              <view class="mt-10px text-20px">添加照片</view>
            </view>
            <image v-else class="absolute top-0 h-full w-full rd-16px bg-gray-100" :src="pictureUrl" mode="aspectFill"></image>
          </view>
        </ui-aspect-ratio>
      </view>
    </view>
    <!--  -->
    <view class="mt-10px rd-16px bg-white px-20px">
      <view class="flex items-center px-10px">
        <view class="text-24px text-#3 lh-90px">联系手机</view>
        <input v-model="mobile" type="number" class="h-90px flex-1 text-right text-24px lh-90px" maxlength="11" placeholder="请填写可以联系到您的手机号码(必填)">
      </view>
      <view class="flex items-center b-t-1px b-t-#e0 b-t-solid px-10px">
        <view class="text-24px text-#3 lh-90px">输入订单号</view>
        <input v-model="orderNo" type="number" class="h-90px flex-1 text-right text-24px lh-90px" placeholder="请填写您的订单号(必填)">
      </view>
    </view>
  </view>

  <view class="fixed bottom-0 w-full flex bg-white pt-15px safe-pb-15px">
    <view class="btn-primary-black mx-a w-600px text-36px lh-80px" @click="handleSubmit">提交</view>
  </view>
</template>

<style lang="less" scoped></style>
